<template>
   <div>
     <el-dialog
       title="添加简答题"
       :visible.sync="addVisible"
       width="60%"
       :show-close="false"
       :close-on-click-modal="false">

       <el-form :model="DataForm" status-icon ref="DataForm" label-width="80px" class="demo-ruleForm">
         <el-form-item label="科目：" prop="f_sb_id">
           <div class="block">
             <el-cascader
               placeholder="请选择"
               :options="options"
               filterable
               v-model="DataForm.f_sb_id"
             ></el-cascader>
           </div>
         </el-form-item>
         <div v-for="(obj,index) in DataForm.formDataList" :key="index">
           <el-row>
             <el-col :span="20">
               <el-form-item label="题目:" prop="fb_title">
                 <el-input type="textarea" v-model="DataForm.formDataList[index].fb_title" auto-complete="off"></el-input>
               </el-form-item>
             </el-col>

             <el-col :span="3">
               <el-button style="float: right; padding: 3px 0;margin-left: 15px;" type="danger" size="mini" @click="deleteDataForm(index)">删除</el-button>
               <el-button style="float: right; padding: 3px 0" type="primary" size="mini" @click="addDataForm(index)">增加</el-button>
             </el-col>
           </el-row>
           <div v-for="(v,k) in DataForm.formDataList[index].FillAnsList" :key="k">
             <el-row style="margin-left: 60px;">
               <el-col :span="12">
                  <el-form-item :label="v.label" prop="value">
                     <el-input v-model="v.value"></el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="3">
                   <el-button style="float: right; padding: 3px 0;margin-left: 15px;" type="danger" size="mini" @click="deleteDataAnswer(index,k)">删除空</el-button>
                   <el-button style="float: right; padding: 3px 0;" type="primary" size="mini" @click="addDataAnswer(index,k)">增加空</el-button>
               </el-col>
             </el-row>
           </div>
           <el-divider></el-divider>
         </div>
       </el-form>

       <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitData" size="mini">确 定</el-button>
      </span>
     </el-dialog>
   </div>
</template>
<script>
  import {getAllSubject,addFill,deleteFill,updateFill,findFill} from '@/api/questions'
  import ElCol from "element-ui/packages/col/src/col";
  import ElFormItem from "../../../../../node_modules/element-ui/packages/form/src/form-item";
  import ElInput from "../../../../../node_modules/element-ui/packages/input/src/input";
  export default{
    components: {
      ElInput,
      ElFormItem,
      ElCol},
    props:["showAddVisible"],
      mounted(){
         this.c_getAllSubject();

      },
      data(){
          return {
            addVisible:this.showAddVisible,
            DataForm:{
              formDataList:[
                {fb_title:"",sb_id:0,FillAnsList:[{label:"空_1：",value:""}]}
              ],
              f_sb_id:0
            },
            options:[], //选择所属科目

          }
      },

      methods:{

        submitData(){
          this.$refs["DataForm"].validate((valid) =>{
              if(valid){
                for(let i = 0;i < this.DataForm.formDataList.length;i ++){
                  this.DataForm.formDataList[i].sb_id = parseInt(this.DataForm.f_sb_id[2]);
                  let ansList = this.DataForm.formDataList[i].FillAnsList;
                  let andStr = "";
                  for(let j = 0;j < ansList.length;j ++){
                      andStr += ansList[j].value;
                      if(j < ansList.length - 1){
                        andStr += "-"
                      }
                  }
                  this.DataForm.formDataList[i].fillBanksAnswer = {fba_answer:andStr};
                }

                addFill(this.DataForm.formDataList).then(res=>{
                    if(res.code == 200){
                        this.$message({
                          type: 'success',
                          message: '添加成功'
                        });
                        this.closeDialog();
                      }else{
                        this.$message({
                          type: 'error',
                          message: '添加失败'
                        });
                      }
                })
              }

          });

        },

        closeDialog(){
            this.addVisible = false;
            this.$emit("closeDialog","add");
        },

        addDataAnswer(index,k){
          let n = this.DataForm.formDataList[index].FillAnsList.length;
          this.DataForm.formDataList[index].FillAnsList.push({label:`空_${n+1}：`,value:""})
        },

        deleteDataAnswer(index,k){
          if(this.DataForm.formDataList[index].FillAnsList.length > 1){
            this.DataForm.formDataList[index].FillAnsList.splice(k,1)
          }
        },

        addDataForm(index){
          this.DataForm.formDataList.push({fb_title:"",sb_id:0,FillAnsList:[{label:"空_1：",value:""}]})
        },

        deleteDataForm(index){
          if(this.DataForm.formDataList.length > 1){
            this.DataForm.formDataList.splice(index,1)
          }
        },


        c_getAllSubject(){
          getAllSubject().then(res=>{
            if(res.code == 200){
              for(let i = 0;i < res.data.length;i ++){
                let tLevel = {value:res.data[i].l_id,label:res.data[i].l_name};
                this.options.push(tLevel);
                if(res.data[i].list != null && res.data[i].list.length > 0){
                  let gList = res.data[i].list;
                  let children = [];
                  for(let j = 0;j < gList.length;j ++){
                    let gGroup = {value:gList[j].g_id,label:gList[j].g_name};
                    children.push(gGroup);

                    if(gList[j].list != null && gList[j].list.length > 0){
                      let sList = gList[j].list;
                      let children1 = [];

                      for(let n = 0;n < sList.length;n ++){
                        let subject = {value:sList[n].sb_id,label:sList[n].sb_name};
                        children1.push(subject);
                      }
                      gGroup.children = children1;
                    }
                  }
                  tLevel.children = children;
                }
              }
            }
          });
        },
      }
  }
</script>
